<template>
  <div id="app">
    <router-view />
    <div style=" position: fixed;top:0;left:0;width:100%;z-index:999999;pointer-events: none;"
         :style="{height:height,background:background}" />

    <div style=" position: fixed;top:280px;left:17px;width:30px;height:30px;z-index:1000;">
      <el-button type="text" v-if="black"
                 @click="changeModel(false)"> <i class="el-icon-sunny" /></el-button>
      <el-button type="text"  v-if="!black"
                 @click="changeModel(true)"> <i class="el-icon-moon" /></el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      height: '900px',
      black: true,
      background: 'rgba(0,0,0,0.3)'

    }
  },
  mounted() {
    this.height = document.documentElement.clientHeight + 'px'
    window.onresize = () => {
      this.height = document.documentElement.clientHeight + 'px'
    }
  },
  methods: {
    changeModel(mode) {
      this.black = mode
      if (mode) {
        this.background = 'rgba(0,0,0,0.3)'
      } else {
        this.background = 'rgba(0,0,0,0)'
      }
    }
  }
}

</script>

<style>
::-webkit-scrollbar {
  /* display: none; */
  /* Chrome Safari */
  /* background-color: white; */
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: rgb(235, 241, 241);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(238, 231, 231);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
</style>
